<i18n>
{
  "en": {
    "page_title": ""
  },
  "zh": {
    "page_title": ""
  }
}
</i18n>

<template>
  <el-form :disabled="disabled" :inline="true" :model="searchForm" ref="searchForm" class="search-form" label-width="120px">
      <el-row :gutter="15">

        <el-col :xs="24" :sm="12" :md="12" :lg="8">
          <el-form-item label="搜索关键字" prop="keyword">
            <el-input v-model.trim="searchForm.keyword"
             placeholder="搜索主型号/内部型号/外部型号-注：全产品库搜索">
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="8">
          <el-form-item label="二级产品线" prop="secondLnName">
            <el-select v-model="searchForm.secondLnName" placeholder="二级产品线" v-loading="secondProductLineTypesLoading">
              <el-option v-for="item in secondProductLineTypes" :label="item.secondLnName" :value="item.paramKey" :key="item.paramKey"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="8">
          <el-form-item label="产品系列" prop="thirdLnName">
            <el-input v-model.trim="searchForm.thirdLnName" placeholder="产品系列">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="8">
          <el-form-item label="发布状态" prop="releaseStatus">
            <el-select v-model="searchForm.releaseStatus" placeholder="发布状态" @change="publishChanged" v-loading="productPublishStatusTypesLoading">
              <el-option v-for="item in productPublishStatusTypes" :label="item.cnName" :value="item.code" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="8">
          <el-form-item label="中性属性" prop="default1">
            <el-select v-model="searchForm.default1" placeholder="产品状态" @change="publishChanged" v-loading="neutralTypesLoading">
              <el-option v-for="item in neutralTypes" :label="item.cnName" :value="item.code" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="12" :lg="8">
          <el-form-item label="PN值" prop="pn">
            <el-select v-model="searchForm.pn" placeholder="PN值" @change="pnChanged" v-loading="pnTypesLoading">
              <el-option v-for="item in pnTypes" :label="item.cnName" :value="item.code" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

         <el-col :xs="24" :sm="24" :md="24" :lg="24">
          <el-form-item class="text-right">
            <el-button type="danger" @click="submitForm('searchForm')">查询</el-button>
            <el-button type="primary" @click="resetForm('searchForm')">重置</el-button>
          </el-form-item>
        </el-col>

      </el-row>


    </el-form>
</template>

<script>
  import { TYPE, getTypeList } from '@/api/common'
  export default {
    data() {
      return {
        // 查询表单
        searchForm: {
          keyword: '',
          secondLnName: '',
          thirdLnName: '',
          releaseStatus: '', // all
          default1: '', // 中性属性
          pn: ''
        },

        // 二级产品线列表
        secondProductLineTypesLoading: false,
        secondProductLineTypes: [],

        // 产品系列列表
        productSerialTypesLoading: false,
        productSerialTypes: [],

        // 发布状态列表
        productPublishStatusTypesLoading: false,
        productPublishStatusTypes: [],

        // 中性属性列表
        neutralTypesLoading: false,
        neutralTypes: [],

        // PN值列表
        pnTypesLoading: false,
        pnTypes: [],

      };
    },
    props: {
      disabled: {
        type: Boolean
      }
    },
    created() {
      let emptyForm = {
          keyword: '',
          secondLnName: '',
          thirdLnName: '',
          releaseStatus: '', // all
          default1: '', // 中性属性
          pn: ''
        }
      this.searchForm = {...emptyForm, ...this.$route.query}
      this.getSecondLineDataList()
      this.getProductSerialDataList()
      this.getProductPublishDataList()
      this.getNeutralTypesDataList()
      this.getPnDataList()
    },

    computed: {

    },
    methods: {
      // 获取PN值列表
      getPnDataList () {
        this.pnTypesLoading = true
        getTypeList(TYPE.PN_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.pnTypes = data.cpqSystemConfig
          } else {
            this.pnTypes = []
          }
          this.pnTypesLoading = false
        }).catch(error => {
          this.pnTypesLoading = false
        })
      },
      // 获取二级产品线列表
      getSecondLineDataList () {
        this.secondProductLineTypesLoading = true

        this.$http({
          url: this.$http.adornUrl('/prm-os-srv-prod/product/productinformation/selectSecondLnName'),
          method: 'post',
        }).then( data => {
          if (data && data.code === 0) {
            this.secondProductLineTypes = data.data
          } else {
            this.secondProductLineTypes = []
          }
          this.secondProductLineTypesLoading = false
        }).catch(error => {
          this.secondProductLineTypesLoading = false
        })
      },
      // 获取产品系列列表
      getProductSerialDataList () {
        this.productSerialTypesLoading = true

        getTypeList(TYPE.PRODUCT_SERIAL_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.productSerialTypes = data.cpqSystemConfig
          } else {
            this.productSerialTypes = []
          }
          this.productSerialTypesLoading = false
        }).catch(error => {
          this.productSerialTypesLoading = false
        })
      },
      // 获取发布状态列表
      getProductPublishDataList () {
        this.productPublishStatusTypesLoading = true

        getTypeList(TYPE.PUBLISH_STATUS_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.productPublishStatusTypes = data.cpqSystemConfig
          } else {
            this.productPublishStatusTypes = []
          }
          this.productPublishStatusTypesLoading = false
        }).catch(error => {
          this.productPublishStatusTypesLoading = false
        })
      },
      // 获取中性属性列表
      getNeutralTypesDataList () {
        // neutralTypesLoading: false,
        // neutralTypes: [],

        this.neutralTypesLoading = true

        getTypeList(TYPE.NEUTRAL_STATUS_TYPE).then((data) => {
          if (data && data.code === 0) {
            this.neutralTypes = data.cpqSystemConfig
          } else {
            this.neutralTypes = []
          }
          this.neutralTypesLoading = false
        }).catch(error => {
          this.neutralTypesLoading = false
        })
      },
      publishChanged(value) {
        // let searchForm = this.searchForm
        // let query = this.$route.query
        // this.$router.push({ query: { ...query,...searchForm }})
        // this.$emit('doSearch')
      },
      pnChanged(){

      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let searchForm = this.searchForm
            let query = this.$route.query
            this.$router.push({ query: { ...query,...searchForm }})
            this.$emit('doSearch')
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        let searchForm = this.searchForm
        this.$router.push({ query: { ...this.$route.query,...searchForm }})
        this.$emit('doSearch')
      }
    }
  }
</script>

<style scoped>
  .search-form {
    padding: 20px 15px 0;
  }

  .search-form >>> .el-form-item__label {
    white-space: nowrap;
  }

  .search-form >>> .el-form-item {
    display: flex;
    width: 100%;
  }

  .el-form-item >>> .el-form-item__content {
     width: 100%;
  }
  .el-form-item >>> .el-select {
    width: 100%;
  }
</style>
